<template>
  <view class="pending-order-item">
    <view class="pending-order-header">
      <text class="title">订单号：{{ info.order_no }}</text>
      <!-- <text class="tag">{{ info.status_text }}</text> -->

      <!-- is_desc_auth 0待审核 1通过 2驳回 -->
      <u-tag
        shape="circle"
        v-if="info.is_desc_auth == 0"
        type="warning"
        style="margin-left: 6px"
        :text="info.status_text"
      ></u-tag>

      <u-tag
        shape="circle"
        v-else-if="info.is_desc_auth == 1"
        type="success"
        style="margin-left: 6px"
        :text="info.status_text"
      ></u-tag>

      <u-tag
        shape="circle"
        v-else
        type="error"
        style="margin-left: 6px"
        :text="info.status_text"
      ></u-tag>
    </view>
    <view class="pending-order-detail">
      <view class="pending-order-detail-item">
        <text>充值人</text>
        <text>
          {{ info.real_name }} 
          <u-tag v-if="info.grade_name" style="margin-left: 6px" :text="info.grade_name"></u-tag
        ></text>
      </view>
      <view class="pending-order-detail-item">
        <text>电话</text>
        <text>{{ info.mobile }}</text>
      </view>
      <view class="pending-order-detail-item">
        <text>扣除金额</text>
        <text>{{ info.dec_money }}</text>
      </view>
      <view class="pending-order-detail-item">
        <text>申请时间</text>
        <text>{{ info.apply_time }}</text>
      </view>
    </view>
    <view class="pending-order-detail-bottom">
      <text>{{ info.create_time }}</text>
      <text @click="handleAudit(info)" v-if="info.desc_auth === 0"
        >审核</text
      >
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {};
  },
  methods: {
    handleAudit() {
      this.$emit("audit", this.info);
    },
  },
};
</script>

<style lang="scss" scoped>
.pending-order-item {
  display: flex;
  flex-direction: column;
  padding: 0 32rpx;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  background-color: white;
}
.pending-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 24rpx 0;
  border-bottom: 1px solid #e7e7e7;
  .title {
    font-size: 30rpx;
    line-height: 48rpx;
    flex: 1;
    margin-right: 20rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111111;
  }
  .tag {
    display: flex;
    padding: 8rpx 20rpx;
    border-radius: 26rpx;
    font-size: 28rpx;
    color: #287eff;
    background-color: rgba(40, 126, 255, 0.14);
  }
}
.pending-order-detail {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e7e7e7;
}
.pending-order-detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
  line-height: 40rpx;
  &:nth-of-type(1) {
    margin-top: 20rpx;
  }
  &:nth-last-of-type(1) {
    margin-bottom: 20rpx;
  }
  text {
    font-size: 28rpx;
    color: #666666;
    &:nth-of-type(2) {
      color: #111111;
    }
  }
  .order-money {
    font-weight: bold;
  }
}
.pending-order-detail-bottom {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 0;
  text {
    font-size: 28rpx;
    color: #666666;
    &:nth-of-type(2) {
      color: #287eff;
    }
    .iconfont {
      color: #287eff;
    }
  }
}
</style>
